<template>
  <div class="home-middle1">
    <div class="home-middle1-content">
      <div class="home-middle1-wrap">
        <div class="index__hd">
          <h2 class="index__tit"><i class="icon_txt"></i></h2>
          <router-link to="/toplist" class="all-play">更多 ></router-link>
        </div>
        <div class="mod_index_tab">
          <a class="index_tab__item index_tab__item--current">精选</a
          ><a class="index_tab__item">内地</a><a class="index_tab__item">港台</a
          ><a class="index_tab__item">欧美</a><a class="index_tab__item">韩国</a
          ><a class="index_tab__item">日本</a>
        </div>

        <Carousel
          :data="[[]]"
          com-name="mv"
          :options="{ slidesPerView: 5, slidesPerGroup: 5 }"
          :showNavigation="true"
        >
          <ul class="mv_list__list mv_list_slide__list">
            <li class="mv_list__item mv_list_slide__item">
              <div class="mv_list__item_box">
                <a class="mv_list__cover mod_cover" title="《FIND YOU》"
                  ><img
                    class="mv_list__pic"
                    loading="lazy"
                    src="//y.qq.com/music/photo_new/T015R640x360M101001SY07L2XAvIR.jpg?max_age=2592000"
                    alt="《FIND YOU》"
                    data-qar-def="//y.qq.com/mediastyle/global/img/mv_300.png?max_age=2592000" /><i
                    class="mod_cover__mask"
                  ></i
                  ><i class="mod_cover__icon_play"></i
                ></a>
                <h3 class="mv_list__title"><a>《FIND YOU》</a></h3>
                <p class="mv_list__singer">
                  <a
                    class="playlist__author"
                    title="G.E.M. 邓紫棋"
                    href="/n/ryqq/singer/001fNHEf1SFEFN"
                    >G.E.M. 邓紫棋</a
                  >
                </p>
                <div class="mv_list__info">
                  <span class="mv_list__listen"
                    ><i class="mv_list__listen_icon sprite"></i>3.1万</span
                  >
                </div>
              </div>
            </li>
            <li class="mv_list__item mv_list_slide__item">
              <div class="mv_list__item_box">
                <a class="mv_list__cover mod_cover" title="《Blue》"
                  ><img
                    class="mv_list__pic"
                    loading="lazy"
                    src="//y.qq.com/music/photo_new/T015R640x360M101001vR2Gc3DyvKh.jpg?max_age=2592000"
                    alt="《Blue》"
                    data-qar-def="//y.qq.com/mediastyle/global/img/mv_300.png?max_age=2592000" /><i
                    class="mod_cover__mask"
                  ></i
                  ><i class="mod_cover__icon_play"></i
                ></a>
                <h3 class="mv_list__title"><a>《Blue》</a></h3>
                <p class="mv_list__singer">
                  <a
                    class="playlist__author"
                    title="王嘉尔"
                    href="/n/ryqq/singer/00216fJA496xQG"
                    >王嘉尔</a
                  >
                </p>
                <div class="mv_list__info">
                  <span class="mv_list__listen"
                    ><i class="mv_list__listen_icon sprite"></i>2.7万</span
                  >
                </div>
              </div>
            </li>
          </ul>
        </Carousel>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'RankingList',
}
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/homeStore'
import type { NewAlbumType } from '@/stores/homeStoreType'
import { getHomeToplistApi } from '@/api/home/getRecommendApi'
import Carousel from '@/components/Carousel/index.vue'

const homeStore = useHomeStore() //获取数据

const forCarouselData = ref<NewAlbumType[][]>([])
</script>

<style scoped>
.mv_list__cover {
  width: 224px;
}
.mv_list__cover img {
  width: 100%;
}
.mv_list_slide__list {
  display: inline-block;
  margin-right: 0;
  font-size: 14px;
}
.mv_list_slide__item {
  padding-bottom: 25px;
  float: left;
  overflow: hidden;
}
.index_tab__item {
  display: inline-block;
  font-size: 15px;
  margin: 0 24px;
  color: #333;
  cursor: pointer;
}
.index_tab__item--current {
  color: #31c27c;
}
.mod_index_tab {
  height: 50px;
  text-align: center;
  font-size: 0;
  margin-top: 20px;
}
.all-play {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #000;
}
.all-play:hover {
  color: #31c27c;
}

.home-middle1 {
  background-image: linear-gradient(#f2f2f2, #fff);
  min-width: 1200px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.home-middle1-content {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 75px;
}
.home-middle1-wrap {
  padding: 50px 0 24px 0;
}
.index__hd {
  position: relative;
}
.index__tit {
  display: block;
  margin: 0 auto;
  width: 196px;
  height: 40px;
  background-image: url('./imgs/index_tit.ee334dbf.png');
  background-position-y: -250px;
}
</style>
